<template>
  <!-- 设计需求申请 -->
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search"></searchData>

    <a-card :bordered="false" style="over-flow:scroll">
      <!-- <title-name title="设计需求申请列表"></title-name> -->
      <list-table
        ref="table"
        :request="loadData"
        :columns="columns"
        :statistics-config="{ use: true, statistics, temp }"
        :exportConfig="{ use: true,select: '导出选中',all: '导出全部'}"
        :is-init="false"
      >
        <template slot="prefix">
          <a-button type="primary" @click="goAdd('add')" v-btnPermission="'ds_003_add_01'">新增设计需求</a-button>
        </template>

        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <div  slot="actions" slot-scope="text, record">
          <MoreButton>
          <a @click="handleSub(record,'view')" v-btnPermission="'ds_003_loo_02'">查看</a>
          <a v-if="record.statusCode=='0' || record.statusCode=='2'" @click="handleEdit(record,'edit')"
                v-btnPermission="'ds_003_edi_03'"
          >编辑</a>
          <a v-if="record.statusCode !='0'" @click="handleApproveDetail(record)"
                v-btnPermission="'ds_003_moi_06'"
          >审批信息</a>
          <BasePrintButton v-if="record.statusCode == '4'" buttonType="a" :showDivider="false"
                           :beforePrintFn="() => beforePrintFn(record.id)"
          />
          </MoreButton>
        </div>
      </list-table>
      <!-- 审批详情 -->
      <ApprovalDetails
        :title="'审批详情'"
        :businessId="businessId"
        :visible="visibleApprove"
        @cancel="visibleApprove = false"
        @confirm="visibleApprove = false"
      />
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { getdemandList, getdemandListTotal, print } from '@/api/design/demand'
import { getTypes, getAllBranchCompany } from '@/api/commons'
import ApprovalDetails from '@/components/approvalDetails'
import OrgTreeSelect from '@/components/OrgTreeSelect'

const columns = [
  {
    title: '序号',
    width: '65px',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '设计需求名称',
    dataIndex: 'designDemandName'
  },
  {
    title: '设计需求类型',
    dataIndex: 'designDemandType'

  },
  {
    title: '项目名称',
    dataIndex: 'projectName'

  },
  {
    title: '单位名称',
    dataIndex: 'companyName'
  },
  {
    title: '项目设计管理类别',
    dataIndex: 'designType'
  },
  {
    title: '期望回复时间',
    dataIndex: 'expectRecoveryTime'
  },
  {
    title: '提出部门',
    dataIndex: 'proposeDept'
  },
  {
    title: '提出人',
    width: '100px',
    dataIndex: 'proposePerson'
  },
  {
    title: '创建人',
    width: '100px',
    dataIndex: 'createPerson'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '状态 ',
    width: '110px',
    dataIndex: 'status'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    fixed: 'right',
    width: 200,
    scopedSlots: { customRender: 'actions' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    ApprovalDetails
  },
  data() {
    this.columns = columns
    return {
      beforePrintFn: async (id) => {
        let res = await print({ id })
        return res.data.content
      },
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      confirmLoading: false,
      total: [],
      form: {
        name: '',
        status: ''
      },
      visible: false,
      businessId: '',
      visibleApprove: false,
      searchArr: [
        // 搜索框
        {
          name: '设计需求名称',
          value: 'designDemandName',
          type: 'input'
        },
        {
          name: '设计需求类型',
          value: 'designDemandType',
          type: 'select',
          data: []
        },
        {
          name: '时间阶段',
          value: 'rangeTime',
          type: 'dateRange'
        },
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        // {
        //   name: '项目名称',
        //   value: 'projectName',
        //   type: 'input'
        // },
        // {
        //   name: '单位名称',
        //   value: 'branchCompany',
        //   type: 'select',
        //   data: []
        // },
        {
          name: '项目设计管理类别',
          value: 'designType',
          type: 'select',
          data: []
        },
        {
          name: '状态',
          value: 'status',
          type: 'select',
          data: [
            {
              value: '0',
              label: '待提交审核'
            },
            {
              value: '1',
              label: '审核中'
            },
            {
              value: '2',
              label: '审核不通过'
            },
            {
              value: '3',
              label: '待支持'
            },
            // {
            //   value: '4',
            //   label: '已支持'
            // },
            {
              value: '4',
              label: '审核通过'
            }
          ]
        }
      ],
      statistics: {},
      temp: () => {
        return (
          <span style="margin-right: 12px">
                待提交审核： <span class="totalNum">{this.statistics.draftNum } 个 </span> |
                审核中：<span class="totalNum">{this.statistics.submittedNum } 个 </span> |
                审核不通过：<span class="totalNum">{this.statistics.rejectedNum } 个 </span> |
                待支持：<span class="totalNum">{this.statistics.toBeSupported } 个 </span> |
                已支持：<span class="totalNum">{this.statistics.supportedNum } 个 </span>
              </span>
        )
      },
      isFirst: true
    }
  },
  mounted() {
    this.getTypes()
    // this.getAllBranchCompany()
    this.$nextTick(()=>{
      if(this.isFirst) {
        this.isFirst = false
        this.$refs.table.refresh()
      }

    })
  },
  activated() {
      if(!this.isFirst) {
        this.$refs.table.refresh()
      }
  },
  methods: {
    loadData(parameter) {
      if (this.queryParam.rangeTime && !!this.queryParam.rangeTime.length) {
        this.queryParam.startTime = this.queryParam.rangeTime[0].format('YYYY-MM-DD') || void 0,
                this.queryParam.endTime = this.queryParam.rangeTime[1].format('YYYY-MM-DD') || void 0
      }
      this.queryParam.rangeTime = null
      this.getdemandListTotal()
      const requestParameters = Object.assign({}, parameter, this.queryParam)
      return getdemandList(requestParameters)
    },
    // 分公司
    getAllBranchCompany() {
      getAllBranchCompany({ tagCodes: ['BC', 'CO'] }).then(res => {
        let companyList = []
        res.data.forEach(item => {
          companyList.push({
            label: item.name,
            value: item.id
          })
        })
        this.searchArr[4].data = companyList
      })
    },
    handleApproveDetail(record) {
      this.visibleApprove = true
      this.businessId = record.id
    },
    async getdemandListTotal() {
      let res = await getdemandListTotal(this.queryParam)
      if (res.code === this.SUCCESS_CODE){
        this.statistics = res.data
      }
    },
    getTypes() {
      getTypes({ type: '22' }).then(res => {
        let list = []
        res.data.forEach(item => {
          list.push({
            label: item.name,
            value: item.id
          })
        })
        this.searchArr[1].data = list
      })
      getTypes({ type: '9' }).then(res => {
        let list = []
        res.data.forEach(item => {
          list.push({
            label: item.name,
            value: item.id
          })
        })
        this.searchArr[4].data = list
      })
    },
    search(values) {
      this.queryParam = values
      this.$refs.table.refresh(true)
      this.getdemandListTotal()
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys)
      console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    goAdd(type) {
      this.$router.push({
        path: '/project/design/addDemand',
        query: {
          type: type
        }
      })
    },
    handleApprove(record, type) {
      this.$router.push({
        path: '/project/design/approve',
        query: {
          id: record.id,
          type: type
        }
      })
    },
    handleSub(record, type) {
      this.$router.push({
        path: '/project/design/viewDemand',
        query: {
          id: record.id,
          statusCode: record.statusCode,
          type: type
        }
      })
    },
    handleEdit(record, type) {
      this.$router.push({
        path: '/project/design/editDemand',
        query: {
          id: record.id,
          type: type
        }
      })
    }
  }
}
</script>

<style scoped>
.input {
  width: 100%
}

.notShow {
  display: none
}
</style>
